<template>
  <div class="container">
    <!-- 头部保持不变 -->
    <header>
      <div class="header-content">
        <div class="logo">
          <h1><i class="fas fa-calendar-alt"></i> 培养方案课程表预览</h1>
        </div>
      </div>
    </header>

    <!-- 控制面板 - 新增理想样式 -->
    <div class="control-panel">
      <div class="selector">
        <label for="training-program">选择培养方案:</label>
        <select
            id="training-program"
            v-model="selectedTrainingProgram"
            :disabled="loadingTrainingPrograms"
        >
          <option value="">请选择培养方案</option>
          <option
              v-for="program in trainingPrograms"
              :key="program.id"
              :value="program.id"
          >
            {{ program.name }}
          </option>
        </select>
      </div>

<!--      <div class="selector">-->
<!--        <label>学年学期:</label>-->
<!--        <select v-model="selectedAcademicYear">-->
<!--          <option v-for="year in academicYears" :key="year" :value="year">-->
<!--            {{ year }}-{{ year + 1 }}学年-->
<!--          </option>-->
<!--        </select>-->
<!--      </div>-->

<!--      <div class="selector">-->
<!--        <label>学期:</label>-->
<!--        <select v-model="selectedSemester">-->
<!--          <option v-for="semester in semesters" :key="semester.value" :value="semester.value">-->
<!--            {{ semester.label }}-->
<!--          </option>-->
<!--        </select>-->
<!--      </div>-->

      <button
          @click="fetchCourseScheduleData"
          :disabled="!selectedTrainingProgram || loading"
          class="action-btn primary-btn"
          style="margin-left: 15px;"
      >
        <i class="fas fa-search" v-if="!loading"></i>
        <i class="fas fa-spinner fa-spin" v-else></i>
        {{ loading ? '查询中...' : '查询课表' }}
      </button>

      <div class="current-info">
        <i class="fas fa-info-circle"></i>
        当前: {{ selectedTrainingProgramName || '未选择培养方案' }}
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loadingTrainingPrograms" class="loading">
      <i class="fas fa-spinner fa-spin"></i>
      <p>正在加载培养方案...</p>
    </div>

    <!-- 错误信息显示 -->
    <div v-if="errorMsg" class="error-message">
      <i class="fas fa-exclamation-triangle"></i>
      {{ errorMsg }}
      <button @click="fetchTrainingPrograms" class="reload-btn">
        <i class="fas fa-sync-alt"></i> 重新加载
      </button>
    </div>

    <!-- 课表内容 -->
    <div v-if="result && !loadingTrainingPrograms" class="timetable">
      <table>
        <thead>
        <tr>
          <th>时间/星期</th>
          <th v-for="(day, index) in days" :key="index">{{ day }}</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(time, index) in timeSlots" :key="index">
          <td class="time-column">{{ time.start }}<br>---<br>{{ time.end }}</td>

          <template v-for="dayIndex in 7" :key="dayIndex">
            <!-- 起始节渲染 -->
            <td
                v-if="getCourseAt(dayIndex, index+1)"
                :rowspan="getCourseAt(dayIndex, index+1).endLesson - getCourseAt(dayIndex, index+1).startLesson + 1"
                class="course-cell"
            >
              <div class="course-card"
                   :class="getCourseColorClass(getCourseAt(dayIndex, index+1))"
                   @click="showCourseDetail(getCourseAt(dayIndex, index+1))">
                <div class="course-name">{{ getCourseAt(dayIndex, index+1).courseName }}</div>
                <div class="course-details">
                    <span v-if="getCourseAt(dayIndex, index+1).teacherNameLoading">
                      <i class="fas fa-spinner fa-spin"></i> 加载中...
                    </span>
                  <span v-else>{{ getCourseAt(dayIndex, index+1).teacherName || '未知教师' }}</span>
                </div>
                <div class="course-details">
                    <span v-if="getCourseAt(dayIndex, index+1).classroomNameLoading">
                      <i class="fas fa-spinner fa-spin"></i> 加载中...
                    </span>
                  <span v-else>{{ getCourseAt(dayIndex, index+1).classroomName || '未知地点' }}</span>
                </div>
              </div>
            </td>

            <!-- 被覆盖的节次，不渲染 -->
            <td v-else-if="isCoveredByMergedCourse(dayIndex, index+1)" style="display:none"></td>

            <!-- 空课 -->
            <td v-else class="empty-cell"></td>
          </template>
        </tr>
        </tbody>
      </table>
    </div>

    <div v-if="loading" class="loading">
      <i class="fas fa-spinner fa-spin"></i>
      <p>正在加载课程数据...</p>
    </div>

    <div v-if="!loading && !result && !errorMsg && !loadingTrainingPrograms" class="no-data">
      <i class="fas fa-calendar-times"></i>
      <h3>暂无课程数据</h3>
      <p>请选择培养方案并点击查询课表</p>

    </div>

    <!-- 课程详情对话框 -->
    <div v-if="detailDialogVisible" class="modal-overlay" @click="closeDialog">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>{{ selectedCourse ? selectedCourse.courseName : '课程详情' }}</h3>
          <button @click="closeDialog" class="close-btn">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div v-if="selectedCourse" class="modal-body">
          <div class="detail-item">
            <label>课程名称:</label>
            <span>{{ selectedCourse.courseName }}</span>
          </div>
          <div class="detail-item">
            <label>授课教师:</label>
            <span v-if="selectedCourse.teacherNameLoading">
              <i class="fas fa-spinner fa-spin"></i> 加载中...
            </span>
            <span v-else>{{ selectedCourse.teacherName || '未知教师' }}</span>
          </div>
          <div class="detail-item">
            <label>上课教室:</label>
            <span>{{ selectedCourse.classroomName || '未分配' }}</span>
          </div>
          <div class="detail-item">
            <label>上课时间:</label>
            <span>{{ days[selectedCourse.dayOfWeek - 1] }} 第{{ selectedCourse.startLesson }}-{{ selectedCourse.endLesson }}节</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {scheduleCourses} from '@/api/trainingManagement/MCTSCourseScheduling'
import {getCourseScheduleByTrainingProgramId} from '@/api/student/studentManger'
import {listTrainingManagement} from '@/api/trainingManagement/trainingManagement'
import {ref, onMounted, computed, reactive} from 'vue'
import {ElMessage} from 'element-plus'
import {Refresh, Warning, Loading, Search, Clock} from '@element-plus/icons-vue'
import {selectByResourceIdAndResourceType} from '@/api/course/availability'
import { getClassroom } from '@/api/classroom/classroom';
// 教师信息缓存机制
const teacherCache = new Map()
const teacherPendingRequests = new Map()

// 课程颜色缓存
const courseColorCache = new Map()

// 预定义的颜色样式类名
const colorClasses = [
  'course-color-1', 'course-color-2', 'course-color-3', 'course-color-4',
  'course-color-5', 'course-color-6', 'course-color-7', 'course-color-8',
  'course-color-9', 'course-color-10', 'course-color-11', 'course-color-12'
]

// 根据课程名称获取颜色类名
const getCourseColorClass = (course) => {
  if (!course || !course.courseName) return colorClasses[0]

  const courseName = course.courseName
  if (courseColorCache.has(courseName)) {
    return courseColorCache.get(courseName)
  }

  // 生成稳定哈希值
  let hash = 0
  for (let i = 0; i < courseName.length; i++) {
    const char = courseName.charCodeAt(i)
    hash = ((hash << 5) - hash) + char
    hash = hash & hash
  }

  const colorIndex = Math.abs(hash) % colorClasses.length
  const colorClass = colorClasses[colorIndex]
  courseColorCache.set(courseName, colorClass)

  return colorClass
}

// 通过课程ID获取教师姓名
async function getTeacherNameByCourseId(courseId) {
  if (!courseId) return '未知教师'

  if (teacherCache.has(courseId)) {
    const cachedName = teacherCache.get(courseId)
    return cachedName
  }

  if (teacherPendingRequests.has(courseId)) {
    return teacherPendingRequests.get(courseId)
  }

  const request = selectByResourceIdAndResourceType(courseId)
      .then(response => {
        const result = response
        if (result.code === 200 && result.data && result.data.length > 0) {
          const teacherNames = result.data.map(name => name || '未知教师')
          const uniqueNames = Array.from(new Set(teacherNames))

          if (uniqueNames.length === 0) {
            return '未知教师'
          }

          const teacherName = uniqueNames.join('，')
          teacherCache.set(courseId, teacherName)
          return teacherName
        }
        throw new Error(result.msg || '未查询到教师信息')
      })
      .catch(error => {
        console.error(`获取课程[${courseId}]的教师信息失败:`, error)
        return '未知教师'
      })
      .finally(() => {
        teacherPendingRequests.delete(courseId)
      })

  teacherPendingRequests.set(courseId, request)
  return request
}

// 存储接口返回数据
const result = ref(null)
const errorMsg = ref('')
const loading = ref(false)
const loadingTrainingPrograms = ref(false)
const selectedTrainingProgram = ref('')
const trainingPrograms = ref([])
const detailDialogVisible = ref(false)
const selectedCourse = ref(null)
const selectedAcademicYear = ref(new Date().getFullYear())
const selectedSemester = ref(1)

// 处理后的课程数据用于跨行显示
const processedCourses = ref([])

// 星期几和时间段
const days = ref(['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'])
const timeSlots = ref([
  { start: "10:00", end: "10:45" },
  { start: "10:55", end: "11:40" },
  { start: "12:10", end: "12:55" },
  { start: "13:05", end: "13:50" },
  { start: "15:00", end: "15:45" },
  { start: "15:55", end: "16:40" },
  { start: "17:10", end: "17:55" },
  { start: "18:05", end: "18:50" },
  { start: "21:00", end: "21:45" },
  { start: "21:55", end: "22:40" }
])

// 学年选项（生成最近5年）
const academicYears = computed(() => {
  const currentYear = new Date().getFullYear()
  return Array.from({length: 5}, (_, i) => currentYear - 2 + i)
})

// 学期选项
const semesters = ref([
  {value: 1, label: '第一学期'},
  {value: 2, label: '第二学期'}
])

// 选中的培养方案名称
const selectedTrainingProgramName = computed(() => {
  if (!selectedTrainingProgram.value) return ''
  const program = trainingPrograms.value.find(p => p.id === selectedTrainingProgram.value)
  return program ? program.name : ''
})

// 获取某时间段起始的课程
const getCourseAt = (day, time) => {
  return processedCourses.value.find(course =>
      course.dayOfWeek === day && course.startLesson === time
  ) || null
}

// 判断当前节次是否被某个跨多节的课程覆盖
const isCoveredByMergedCourse = (day, time) => {
  return processedCourses.value.some(course =>
      course.dayOfWeek === day &&
      time > course.startLesson &&
      time <= course.endLesson
  )
}

// 显示课程详情
const showCourseDetail = (course) => {
  if (!course || course.courseName === '无课程') return
  selectedCourse.value = course
  detailDialogVisible.value = true
}

// 关闭对话框
const closeDialog = () => {
  detailDialogVisible.value = false
  selectedCourse.value = null
}

// 获取培养方案列表
const fetchTrainingPrograms = async () => {
  loadingTrainingPrograms.value = true
  try {
    const res = await listTrainingManagement()
    trainingPrograms.value = res.data || res.rows || []
    ElMessage.success('培养方案加载成功')
  } catch (err) {
    errorMsg.value = '加载培养方案失败：' + err.message
    ElMessage.error('加载培养方案失败')
  } finally {
    loadingTrainingPrograms.value = false
  }
}

// 调用获取课表接口
const fetchCourseScheduleData = async () => {
  if (!selectedTrainingProgram.value) {
    ElMessage.warning('请先选择培养方案')
    return
  }

  teacherCache.clear()
  loading.value = true
  errorMsg.value = ''

  try {
    const res = await getCourseScheduleByTrainingProgramId(selectedTrainingProgram.value)
    result.value = res
    await processTimetableData(res.data)
    ElMessage.success('课表数据加载成功')
  } catch (err) {
    errorMsg.value = '接口调用失败：' + err.message
    ElMessage.error('加载课表数据失败')
  } finally {
    loading.value = false
  }
}
// 教室信息缓存机制
const classroomCache = new Map()
const classroomPendingRequests = new Map()

// 格式化教室ID显示
const formatClassroomId = (classroomId) => {
  if (!classroomId) return '未知地点'
  if (classroomId.length > 12 && classroomId.includes('-')) {
    return `地点${classroomId.substring(0, 4)}...`
  }
  return `地点${classroomId}`
}

// 获取教室信息
async function getClassroomInfo(classroomId) {
  if (!classroomId) return { name: '未知地点', notes: '未知地点' }

  if (classroomCache.has(classroomId)) {
    return classroomCache.get(classroomId)
  }

  if (classroomPendingRequests.has(classroomId)) {
    return classroomPendingRequests.get(classroomId)
  }

  const request = getClassroom(classroomId)
      .then(response => {
        const result = response
        if (result.code === 200 && result.data) {
          const classroomData = result.data
          const classroomInfo = {
            name: classroomData.classRoomName ||
                classroomData.roomCode ||
                formatClassroomId(classroomId),
            notes: classroomData.classRoomName || '未知地点'
          }
          classroomCache.set(classroomId, classroomInfo)
          return classroomInfo
        }
        throw new Error(result.msg || '获取教室信息失败')
      })
      .catch(error => {
        console.error('获取教室信息失败:', error)
        const fallbackInfo = {
          name: formatClassroomId(classroomId),
          notes: formatClassroomId(classroomId)
        }
        classroomCache.set(classroomId, fallbackInfo)
        return fallbackInfo
      })
      .finally(() => {
        classroomPendingRequests.delete(classroomId)
      })

  classroomPendingRequests.set(classroomId, request)
  return request
}
// 处理课表数据为跨行显示格式
// 处理课表数据为跨行显示格式
const processTimetableData = async (data) => {
  const courses = []

  for (const course of data) {
    const courseClassId = course.courseScheduleDetails.id

    for (const schedule of course.classScheduleDetailedList) {
      const day = schedule.weekDay
      const startSession = parseInt(schedule.startTime.replace('第', '').replace('节', ''))
      const endSession = parseInt(schedule.endTime.replace('第', '').replace('节', ''))

      if (day >= 1 && day <= 7 && startSession >= 1 && startSession <= 10) {
        const courseData = reactive({
          dayOfWeek: day,
          startLesson: startSession,
          endLesson: Math.min(endSession, 10),
          courseName: course.courseScheduleDetails.className || '未知课程',
          courseId: courseClassId,
          teacherName: '加载中...',
          teacherNameLoading: true,
          classroomId: course.courseScheduleDetails.classroom,
          classroomName: formatClassroomId(course.courseScheduleDetails.classroom),
          classroomNameLoading: true, // 初始设置为加载中
        })
        courses.push(courseData)

        // 异步加载教师信息
        if (courseClassId) {
          getTeacherNameByCourseId(courseClassId)
              .then(name => {
                courseData.teacherName = name
                courseData.teacherNameLoading = false
              })
              .catch(() => {
                courseData.teacherName = '未知教师'
                courseData.teacherNameLoading = false
              })
        }

        // 异步加载教室信息
        if (course.courseScheduleDetails.classroom) {
          getClassroomInfo(course.courseScheduleDetails.classroom)
              .then(classroomInfo => {
                courseData.classroomName = classroomInfo.notes
                courseData.classroomNameLoading = false
              })
              .catch(error => {
                console.error('获取教室信息失败:', error)
                courseData.classroomName = formatClassroomId(course.courseScheduleDetails.classroom)
                courseData.classroomNameLoading = false
              })
        } else {
          courseData.classroomNameLoading = false
        }
      }
    }
  }

  processedCourses.value = courses
}
// 组件挂载时自动调用接口
onMounted(() => {
  fetchTrainingPrograms()
})
</script>

<style scoped>
/* 基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

header {
  background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
  color: white;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo h1 {
  font-size: 28px;
  display: flex;
  align-items: center;
}

.logo h1 i {
  margin-right: 10px;
  font-size: 32px;
}

.control-panel {
  background: white;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.selector {
  display: flex;
  align-items: center;
  gap: 10px;
}

.selector label {
  font-weight: 600;
  color: #555;
}

select {
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

select:hover {
  border-color: #4b6cb7;
  box-shadow: 0 0 0 2px rgba(75, 108, 183, 0.2);
}

.current-info {
  margin-left: auto;
  background: #eef4ff;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  color: #4b6cb7;
}

.timetable {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
}

th, td {
  padding: 0;
  text-align: center;
  border: 1px solid #eaeaea;
  position: relative;
}

th {
  background-color: #4b6cb7;
  font-weight: 600;
  color: white;
  padding: 15px;
  height: 50px;
}

.time-column {
  background-color: #f1f5f9;
  font-weight: 600;
  color: #4b6cb7;
  width: 100px;
  font-size: 12px;
  padding: 15px;
  height: 80px;
}

.course-cell {
  padding: 0 !important;
  height: 80px;
  vertical-align: top;
}

.course-card {
  position: absolute;
  top: 10%;
  left: 5%;
  right: 5%;
  bottom: 10%;
  border-radius: 10px;
  padding: 8px;
  color: #fff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.course-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 课程颜色样式 */
.course-color-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.course-color-1:hover { background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%); }

.course-color-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.course-color-2:hover { background: linear-gradient(135deg, #ee7de9 0%, #f3455a 100%); }

.course-color-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.course-color-3:hover { background: linear-gradient(135deg, #3d9aec 0%, #00e0ec 100%); }

.course-color-4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.course-color-4:hover { background: linear-gradient(135deg, #31d769 0%, #26e7c5 100%); }

.course-color-5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.course-color-5:hover { background: linear-gradient(135deg, #f95e88 0%, #fedf2e 100%); }

.course-color-6 { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }
.course-color-6:hover { background: linear-gradient(135deg, #96ebd8 0%, #fed1d1 100%); }

.course-color-7 { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); }
.course-color-7:hover { background: linear-gradient(135deg, #ff888c 0%, #fec5dd 100%); }

.course-color-8 { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); }
.course-color-8:hover { background: linear-gradient(135deg, #ffe6c0 0%, #fba48d 100%); }

.course-color-9 { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); }
.course-color-9:hover { background: linear-gradient(135deg, #967abf 0%, #fab0d9 100%); }

.course-color-10 { background: linear-gradient(135deg, #fad0c4 0%, #ffd1ff 100%); }
.course-color-10:hover { background: linear-gradient(135deg, #f9c4b2 0%, #ffbfed 100%); }

.course-color-11 { background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); }
.course-color-11:hover { background: linear-gradient(135deg, #72f89e 0%, #7dc9e2 100%); }

.course-color-12 { background: linear-gradient(135deg, #cfd9df 0%, #e2ebf0 100%); color: #4a5568; }
.course-color-12:hover { background: linear-gradient(135deg, #bdc7cd 0%, #d0d9de 100%); }

.course-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  line-height: 1.2;
}

.course-details {
  font-size: 12px;
  opacity: 0.9;
  line-height: 1.2;
  margin-bottom: 2px;
}

.empty-cell {
  background-color: #f9fafb;
  position: relative;
  height: 80px;
}

.loading {
  text-align: center;
  padding: 40px;
  color: #666;
}

.loading i {
  font-size: 40px;
  margin-bottom: 15px;
  color: #4b6cb7;
}

.error-message {
  background: #fff3f3;
  border: 1px solid #ffcdd2;
  color: #d32f2f;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.reload-btn {
  margin-left: auto;
  padding: 8px 15px;
  background: #d32f2f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s;
}

.reload-btn:hover {
  background: #b71c1c;
}

.no-data {
  text-align: center;
  padding: 40px;
  color: #666;
}

.no-data i {
  font-size: 48px;
  margin-bottom: 15px;
  color: #ccc;
}

.action-buttons {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.action-btn {
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s;
  font-size: 14px;
}

.primary-btn {
  background: #4b6cb7;
  color: white;
}

.secondary-btn {
  background: #e2e8f0;
  color: #4a5568;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 10px;
  max-width: 600px;
  width: 90%;
  max-height: 80%;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.modal-header h3 {
  margin: 0;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #666;
}

.modal-body {
  padding: 20px;
}

.detail-item {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
}

.detail-item label {
  font-weight: 600;
  color: #555;
  width: 100px;
  flex-shrink: 0;
}

.detail-item span {
  color: #333;
}

@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .control-panel {
    flex-direction: column;
    align-items: stretch;
  }

  .current-info {
    margin-left: 0;
    text-align: center;
  }
}
</style>
